<template>
  <div class="execution">
    <basic-container>
      <avue-crud
        ref="crud"
        :option="option"
        :data="tableList"
        :table-loading="tableLoading"
        :page="page"
        @on-load="getList"
        @refresh-change="refreshChange"
        @search-change="searchChange"
        @search-reset="searchReset"
        @size-change="sizeChange"
        @current-change="currentChange"
      >
        <template slot="status" slot-scope="scope">
          <el-tag :type="statusText(scope.row.status).type">
            {{ statusText(scope.row.status).text }}
          </el-tag>&nbsp;&nbsp;
        </template>

        <template
          slot="menu"
          slot-scope="scope">
          <el-link
            v-if="permissionBtn.pre_node_open && scope.row.status == 0"
            :underline="false"
            type="primary"
            size="small"
            icon="el-icon-edit"
            @click="handleStart(scope.row,scope.index)">启动
          </el-link>
          <el-link
            v-if="permissionBtn.pre_node_stop && scope.row.status == 1"
            :underline="false"
            type="danger"
            size="small"
            icon="el-icon-thumb"
            @click="handleSop(scope.row,scope.index)">停止
          </el-link>
        </template>
      </avue-crud>
    </basic-container>
  </div>
</template>
<script>
  import { fetchList, putObj,stop,start } from '@/api/pre/node'
  import { option } from '@/const/crud/pre/node'
  import { mapGetters } from 'vuex'
  export default {
    name: 'Node',
    data(){
      return{
        option: option,
        tableList: [],
        tableLoading: false,
        searchForm: {},
        page: {
          total: 0,
          currentPage: 1,
          pageSize: 20,
        },

      }
    },
    computed: {
      ...mapGetters(['permissions']),
      permissionBtn(){
        return {
          pre_node_open: this.permissions['pre_node_open'],
          pre_node_stop: this.permissions['pre_node_stop']
        }
      }
    },
    created() {
    },

    methods: {
      getList(page, params){
        this.tableLoading = true
        fetchList(Object.assign({
          current: page.currentPage,
          size: page.pageSize
        }, params, this.searchForm)).then(response => {
          this.tableList = response.data.data.records
          this.page.total = response.data.data.total
          this.tableLoading = false
        })
      },
      sizeChange(pageSize) {
        this.page.pageSize = pageSize
      },
      currentChange(current) {
        this.page.currentPage = current
      },
      refreshChange() {
        this.getList(this.page)
      },
      searchChange(param,done) {
        this.searchForm = param
        this.page.currentPage = 1
        this.getList(this.page, param)
        done()
      },
      searchReset() {
        this.searchForm = {}
        this.page.currentPage = 1
        this.getList(this.page)
      },
      //启动和停止
      handleSop(row, index){
        stop(row.statusId).then(() => {
          this.$message.success(`停止成功`)
          this.refreshChange()
        })
      },
      handleStart(row, index){
        start(row.statusId).then(() => {
          this.$message.success(`启动成功`)
          this.refreshChange()
        })
      },
      //状态
      statusText(status){
        switch (status) {
          case 0:
            return {text: '已停止', type: 'danger'}
          case 1:
            return {text: '已启动', type: ''}
        }
      }
    }
  }
</script>
